<template>
  <div class="grxx-box">
    <div class="grxx-my-message">
      个人信息
      <div class="grxx-line1"></div>
    </div>

    <div class="grxx-logo">
      <span>上传头像：</span>
      <span id="lzg"
        >建议上传图片尺寸为60px*60px，若不设置则使用系统默认头像</span
      >
      <div class="grxx-tupian">
        <img src="./u4472.png" alt="" />
        <span>上传</span>
      </div>
      <div class="grxx-tupian-1">
        <div class="grxx-Logo">
          <img src="./u327.png" alt="" />
        </div>
        <div class="grxx-Logo-l">
          <span>预览图</span>
          <img src="./u4468.png" alt="" />
          <img src="./u4469.png" alt="" id="lx1" />
        </div>
      </div>
    </div>

    <div class="grxx-mail-address">
      <span style="color: #ff6262">*</span>
      <span style="color: #cccccc">邮箱地址</span>
      <input
        type="text"
        value="   11938898@163.com"
        placeholder="   该邮箱将作为客服人员的登录账号"
      />
    </div>

    <div class="grxx-kefu-name">
      <span style="color: #ff6262">*</span>
      <span style="color: #cccccc">客服昵称</span>
      <input type="text" value="   客服小美" placeholder="   与外部沟通时使用" />
    </div>

    <div class="grxx-real-name">
      <span style="color: #ff6262">*</span>
      <span style="color: #cccccc">真实姓名</span>
      <input type="text" value="   杜宇" placeholder="   请输入" />
    </div>

    <div class="grxx-kefu-number">
      <span style="color: #cccccc">客服工号</span>
      <input type="text" placeholder="   请输入" />
    </div>

    <div class="grxx-kefu-phone">
      <span style="color: #cccccc">客服手机号码</span>
      <input type="text" placeholder="   请输入" />
    </div>

    <div class="grxx-line2"></div>

    <div class="grxx-shezhi">
      <span>密码设置</span>
    </div>

    <div class="grxx-old-psw">
      <span style="color: #cccccc">原密码</span>
      <input type="text" placeholder="   请输入原密码" />
    </div>

    <div class="grxx-new-psw">
      <span style="color: #cccccc">新密码</span>
      <input type="text" placeholder="   请输入新密码" />
    </div>

    <div class="grxx-defined">
      <span style="color: #cccccc">确认新密码</span>
      <input type="text" placeholder="   请在此输入密码" />
    </div>

    <div class="grxx-line">
    </div>

    <div class="grxx-anniu1">
      <my-button :color="true" width="80">保存</my-button>
    </div>
  </div>
</template>

<script>
import MyButton from '@/components/MyInput/MyButton'
export default {
  components: {
    MyButton
  },
  data() {
    return {
      options1: [
        {
          value1: "选项1",
          label1: "超级管理员",
        },
        {
          value1: "选项2",
          label1: "工单客服",
        },
        {
          value1: "选项3",
          label1: "在线客服",
        },
        {
          value1: "选项3",
          label1: "客服主管",
        },
      ],

      options: [
        {
          value: "选项1",
          label: "客服组一",
        },
        {
          value: "选项2",
          label: "客服组二",
        },
        {
          value: "选项3",
          label: "客服组三",
        },
      ],
      value: "",
    };
  },

  open() {
    this.$message("保存成功");
  },
};
</script>

<style>
.grxx-box {
  width: 1040px;
  height: 868px;
  background-color: #fff;

  overflow: hidden;
}
.grxx-my-message {
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 22px;

  padding-top: 0.1px;
  padding-left: 10px;

  margin-top: 10px;
  padding: 10px 25px;
}
.grxx-logo {
  width: 100%;
  height: 104px;

  background-color: #fff;
  margin-bottom: 45px;

  margin-left: 70px;
  /* border: solid; */
}
.grxx-logo span {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: rgba(153, 153, 153, 0.847058823529412);
}
#lzg {
  width: 337px;
  height: 16px;

  font-size: 12px;

  position: relative;
  top: 116px;
  left: 63px;
}
.grxx-tupian {
  width: 104px;
  height: 104px;

  background-color: rgba(242, 242, 242, 1);
  position: relative;
  left: 130px;
  top: -21px;

  border-radius: 3px;
  border: 2px dashed #cccccc;
}
.grxx-tupian span {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  line-height: 22px;

  position: relative;
  left: 36px;
  top: 50px;
}
.grxx-tupian img {
  width: 24px;
  height: 24px;

  display: block;
  margin: auto;

  position: relative;
  top: 30px;
}
.grxx-tupian-1 {
  width: 104px;
  height: 104px;

  background-color: #fff;
  position: relative;
  left: 260px;
  top: -129px;

  border-radius: 3px;
  border: 2px dashed #cccccc;
}
.grxx-Logo {
  width: 48px;
  height: 48px;

  background-color: blue;
  border-radius: 50%;

  text-align: center;
  line-height: 48px;

  font-family: "ArialMT", "Arial", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;

  margin-top: 20px;
  margin-left: 25px;
}

.grxx-Logo-l span {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.427450980392157);
  font-weight: 400;

  position: relative;
  left: 25px;
  top: 4px;
}
.grxx-Logo img {
  width: 25px;
  height: 25px;
  position: relative;
  top: 7px;
}
.grxx-Logo-l img {
  width: 20px;
  height: 20px;
  position: relative;
  left: 30px;

  top: 12px;
}
.grxx-Logo-l #lx1 {
  width: 10px;
  height: 10px;

  position: relative;
  left: 14px;
  top: 5px;
}
.grxx-mail-address {
  width: 100%;
  height: 50px;
  background-color: #fff;

  text-align: left;
  line-height: 50px;

  margin-top: 10px;
  margin-left: 70px;
}
.grxx-mail-address input {
  width: 320px;
  height: 40px;

  background-color: rgba(242, 242, 242, 1);

  position: relative;
  left: 58px;
  top: -1px;

  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: normal;

  border-radius: 2px;
  outline: none;
  border: none;
}
.grxx-kefu-name {
  width: 100%;
  height: 50px;

  background-color: #fff;
  margin-top: 10px;
  margin-left: 70px;
}
.grxx-kefu-name span {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14px;

  text-align: left;
  line-height: 50px;
}
.grxx-kefu-name input {
  width: 320px;
  height: 40px;

  background-color: rgba(242, 242, 242, 1);

  position: relative;
  left: 66px;

  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: normal;

  border-radius: 2px;
  outline: none;
  border: none;
}
.grxx-real-name {
  width: 100%;
  height: 50px;

  background-color: #fff;
  margin-top: 10px;
  margin-left: 70px;
}
.grxx-real-name span {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14px;

  text-align: left;
  line-height: 50px;
}
.grxx-real-name input {
  width: 320px;
  height: 40px;

  background-color: rgba(242, 242, 242, 1);

  position: relative;
  left: 65px;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: normal;

  border-radius: 2px;
  outline: none;
  border: none;
}

.grxx-kefu-number {
  width: 100%;
  height: 50px;

  background-color: #fff;
  margin-top: 10px;
  margin-left: 70px;
}
.grxx-kefu-number span {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14px;

  text-align: left;
  line-height: 50px;
}
.grxx-kefu-number input {
  width: 320px;
  height: 40px;

  background-color: rgba(242, 242, 242, 1);

  position: relative;
  left: 71px;

  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: normal;

  border-radius: 2px;
  outline: none;
  border: none;
}

.grxx-kefu-phone {
  width: 100%;
  height: 50px;

  background-color: #fff;
  margin-top: 10px;
  margin-left: 70px;
}

.grxx-kefu-phone input {
  width: 320px;
  height: 40px;

  background-color: rgba(242, 242, 242, 1);

  position: relative;
  left: 31px;
  /* top: -1px; */

  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: normal;

  border-radius: 2px;
  outline: none;
  border: none;
}

.grxx-shezhi {
  width: 100%;
  height: 30px;

  text-align: left;
  line-height: 30px;

  margin-left: 70px;
}
.grxx-shezhi span {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
}
.grxx-line2 {
  position: relative;
  margin: 0 auto;
  width: 1040px;
  height: 1.5px;
  background-color: rgba(242, 242, 242, 1);
  text-align: center;
  font-size: 16px;
  color: rgba(101, 101, 101, 1);

  margin-top: 14px;

  margin-bottom: 14px;
}
.grxx-old-psw {
  width: 100%;
  height: 50px;

  background-color: #fff;
  margin-top: 10px;
  margin-left: 70px;
}
.grxx-old-psw input {
  width: 320px;
  height: 40px;

  background-color: rgba(242, 242, 242, 1);

  position: relative;
  left: 78px;
  top: 0px;

  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: normal;

  border-radius: 2px;
  outline: none;
  border: none;
}
.grxx-new-psw {
  width: 100%;
  height: 50px;

  background-color: #fff;
  margin-top: 10px;
  margin-left: 70px;
}
.grxx-new-psw input {
  width: 320px;
  height: 40px;

  background-color: rgba(242, 242, 242, 1);

  position: relative;
  left: 77px;
  top: 0px;

  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: normal;

  border-radius: 2px;
  outline: none;
  border: none;
}
.grxx-defined {
  width: 100%;
  height: 50px;

  background-color: #fff;
  margin-top: 10px;
  margin-left: 70px;
}
.grxx-defined span {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 14px;

  text-align: left;
  line-height: 50px;
}
.grxx-defined input {
  width: 320px;
  height: 40px;

  background-color: rgba(242, 242, 242, 1);

  position: relative;
  left: 53px;
  top: 0px;

  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: normal;

  border-radius: 2px;
  outline: none;
  border: none;
}
.grxx-line1 {
  position: relative;
  margin: 0 auto;
  width: 1040px;
  height: 1.5px;
  background-color: rgba(242, 242, 242, 1);
  text-align: center;
  font-size: 16px;
  color: rgba(101, 101, 101, 1);

  margin-top: 14px;
  margin-bottom: 14px;
}

.grxx-line {
  position: relative;
  margin: 0 auto;
  width: 1040px;
  height: 1.5px;
  background-color: rgba(242, 242, 242, 1);
  text-align: center;
  font-size: 16px;
  color: rgba(101, 101, 101, 1);

  margin-top: 14px;
}
.grxx-anniu1 {
  /* margin: 15px; */
  text-align: left;
  margin-left: 70px;
  margin-top: 15px;
}
</style>